// ** React Imports
import { useEffect, useRef } from 'react'
import * as echarts from 'echarts'

const LeftTwo = () => {
  const charRef = useRef(null)

  useEffect(() => {
    initChart()
  }, [])

  const initChart = () => {
    const chart = echarts.init(charRef.current)
    chart.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999',
          },
        },
      },
      legend: {
        data: ['通过质检数', '未通过质检数', '通过率'],
        textStyle: {
          color: '#95f3f5',
        },
      },
      xAxis: [
        {
          type: 'category',
          data: [
            '一号产线',
            '二号产线',
            '三号产线',
            '四号产线',
            '五号产线',
            '六号产线',
          ],
          axisPointer: {
            type: 'shadow',
          },
          axisLine: { lineStyle: { color: '#95f3f5' } },
        },
      ],
      yAxis: [
        {
          type: 'value',
          name: '通过质检数',

          splitLine: {
            show: false,
          },
          axisLine: { lineStyle: { color: '#95f3f5' } },
        },
        {
          type: 'value',
          name: '未通过质检数',

          splitLine: {
            show: false,
          },
          axisLine: { lineStyle: { color: '#95f3f5' } },
        },
      ],
      series: [
        {
          name: '未通过质检数',
          type: 'bar',
          data: [21, 4, 7, 12, 20, 6],
          itemStyle: {
            color: '#65d0ec',
          },
        },
        {
          name: '通过质检数',
          type: 'bar',
          data: [102, 112, 143, 98, 231, 170],
          itemStyle: {
            color: '#79acff',
          },
        },
        {
          name: '通过率',
          type: 'line',
          data: [67, 87, 72, 97, 83, 92],
          itemStyle: {
            color: '#65d0ec',
          },
        },
      ],
    })
  }
  return (
    <div className="left-two">
      <div className="box-title">产量与不良统计</div>
      <div className="box-content" style={{ height: '320px' }}>
        <div
          className="char"
          ref={charRef}
          style={{ height: '100%', width: '100%' }}
        ></div>
      </div>
    </div>
  )
}

export default LeftTwo
